<template>
  <operateManageView
    :isLoading="isLoading"
    :tableData="tableData"
    :datas="datas"
    :hisDatas="hisDatas"
    @startdateSelect="startdateSelect"
    @enddateSelect="enddateSelect"
    @seachOperate="seachOperate"
  ></operateManageView>
</template>

<script>
  import operateManageView from './operateManageView';

  export default {

    components: {
      operateManageView
      // name
    },
    name: "operateManageLogic",
    props: {},
    filters: {},
    computed: {},
    watch: {},
    data() {
      return {
        isLoading: false,
        tableData: [],
        datas: {
          title_text: "", // 后台数据概览
          legend: [],
          xAxis_data: [],
          series: [
            {
              name: '登录次数',
              type: 'line',
              stack: '总量',
              data: []
            },
            {
              name: '登录人数',
              type: 'line',
              stack: '总量',
              data: []
            }
          ]
        },
        hisDatas: {
          dataset: {
            dimensions: ["登录次数", "登录人数"],
            source: []
          }
        },
        start: "",
        end: ""
      }
    },
    created() {

    },
    mounted() {
      this.getList();
    },
    methods: {
      getList(date) {
        this.isLoading = true;
        _https.post.getVisi(date).then(res => {
          this.tableData = res.data;
          this.getLine();
          this.getHis();
          this.isLoading = false;
        })
        // dateStr=2019-03-29+-+2019-03-30
      },
      handleClick() {

      },
      startdateSelect(start) {
        this.start = start;
      },
      enddateSelect(end) {
        this.end = end;
      },
      seachOperate() {
        if (!this.start || !this.end) {
          this.$message({
            type: 'warning',
            message: '选择开始和结束时间!'
          });
          return;
        }
        let obj = {
          dateStr: `${this.start}+-+${this.end}`
        };
        this.getList(obj);
      },
      getLine() {
        let obj = {};
        this.tableData.map((item) => {
          Object.entries(item).map(([key, value]) => {
            obj[key] ? obj[key].push(value) : obj[key] = [value]
          })
        });

        this.datas = {
          title_text: "", // 后台数据概览
          legend: ["登录次数", "登录人数"],
          xAxis_data: obj.time,
          series: [
            {
              name: '登录次数',
              type: 'line',
              data: obj.num
            },
            {
              name: '登录人数',
              type: 'line',
              data: obj.fre
            }
          ]
        }
      },
      getHis() {
        let newArr = this.tableData.map(item => {
          return {"time": item.time, "登录次数": item.num, "登录人数": item.fre}
        });
        this.hisDatas = {
          dataset: {
            dimensions: ["time", "登录次数", "登录人数"],
            source: newArr
          }
        }
      }
    },
    destroyed() {

    }
  }
</script>

<style scoped lang="less">

</style>
